<template>
  <div>
    <BasicTable
      @register="registerTable"
      @resize-column="handleResizeColumn"
      :canResize="false"
      :scroll="{ x: 'max-content' }"
    >
      <template #toolbar>
        <a-button type="error" @click="batchDelete"> 批量删除 </a-button>
        <a-button type="success" @click="handleCreate">添加资讯</a-button>
        <!--        <a-button type="success" @click="handleEdit">编辑车辆</a-button>-->
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'isPublication'">
          <a-tag v-if="record.isPublication" color="green">已发布</a-tag>
          <a-tag v-if="!record.isPublication" color="red">未发布</a-tag>
        </template>
      </template>
      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              label: '编辑',
              onClick: handleEdit.bind(null, record),
            },
            {
              color: 'warning',
              label: '下架',
              ifShow: record.isPublication,
              onClick: handleStopStart.bind(null, record.id),
            },
            {
              color: 'success',
              label: '发布',
              ifShow: !record.isPublication,
              onClick: handleStopStart.bind(null, record.id),
            },
            {
              color: 'error',
              label: '删除',
              ifShow: !record.isPublication,
              popConfirm: {
                title: '确认要删除吗？',
                confirm: handleDelete.bind(null, record.id),
              },
            },
          ]"
        />
      </template>
    </BasicTable>
    <CarModal1 @register="registerCar" @success="handleSuccess" />
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'AdminManagement',
});
</script>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { BasicTable, TableAction, useTable } from '@/components/Table';
import { useModal } from '@/components/Modal';
import CarModal1 from './components/ArticleModal.vue';
import { articleColumns, articleSearchFormSchema } from './data';
import { useMessage } from '@/hooks/web/useMessage';
import { defHttp } from '@/utils/http/axios';
import { useRoute, useRouter } from 'vue-router';
const { createMessage } = useMessage();
const router = useRoute();
const [registerCar, { openModal: openCarModal }] = useModal();
const [registerTable, { reload, getForm, getSelectRows, getSelectRowKeys }] =
  useTable({
    //title: '列表',
    api: '/article/article/list',
    columns: articleColumns,
    showIndexColumn: true,
    useSearchForm: true,
    indexColumnProps: {
      fixed: 'left',
    },
    beforeFetch: (info) => {
      if (router.query.companyId) {
        return { ...info, companyId: router.query.companyId };
      }
      return;
    },
    formConfig: {
      labelWidth: 80,
      hideLabel: true,
      schemas: articleSearchFormSchema,
      baseColProps: { span: 6 },
    },
    actionColumn: {
      width: 50,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
      fixed: 'right',
    },
    pagination: true,
    bordered: true,
    rowKey: 'id',
    rowSelection: {
      type: 'checkbox',
    },
  });
const exportLoading = ref(false);
onMounted(() => {});
function handleCreate() {
  openCarModal(true, {
    isUpdate: false,
    companyId: router.query.companyId,
  });
}
function handleEdit(record: Recordable) {
  openCarModal(true, {
    isUpdate: true,
    record,
  });
}
async function batDelete() {
  if (getSelectRows().length === 0) {
    createMessage.error('请选择删除选项');
  } else {
    const res = await defHttp.post({
      url: `/article/article/deletes`,
      data: getSelectRowKeys(),
    });
    createMessage.success('已删除');
    reload();
  }
}
async function handleDelete() {
  if (getSelectRows().length === 0) {
    createMessage.error('请选择删除选项');
  } else {
    const res = await defHttp.post({
      url: `/article/article/deletes`,
      data: getSelectRowKeys(),
    });
    createMessage.success('已删除');
    reload();
  }
}
async function handleStopStart(param) {
  const res = await defHttp.post({
    url: `/article/article/articleStatus`,
    data: { id: param },
  });
  reload();
}
function handleSuccess() {
  reload();
}
</script>
